<template>
  <div class="server-details" v-loading.fullscreen="loading" element-loading-text="加载服务器数据...">
    <!-- 页面头部 -->
    <div class="page-header">
     <el-page-header
       @back="goBack"
       :content="currentResource.resourceName || '服务器详情'">
     </el-page-header>

      <div class="header-operations">
        <el-button-group class="operation-group">
          <!-- <el-tooltip content="满意度评价" placement="top">
            <el-button
              size="small"
              icon="el-icon-star-off">
              满意度评价
            </el-button>
          </el-tooltip> -->
          <el-tooltip v-if="currentResource.other1!='1'" content="开机" placement="top">
            <el-button
              size="small"
              icon="el-icon-open"
              @click="handleStart">
              开机
            </el-button>
          </el-tooltip>
          <el-tooltip v-if="currentResource.other1==='1'"  content="关机" placement="top">
            <el-button
              size="small"
              icon="el-icon-switch-button"
              @click="handleStop">
              关机
            </el-button>
          </el-tooltip>
          <el-tooltip content="重启" placement="top">
            <el-button
              size="small"
              icon="el-icon-refresh"
              @click="handleRestart">
              重启
            </el-button>
          </el-tooltip>
          <el-tooltip content="重装" placement="top">
            <el-button
              size="small"
              icon="el-icon-refresh-right">
              重装
            </el-button>
          </el-tooltip>
          <el-tooltip content="远程连接" placement="top">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-monitor"
              @click="handleConsole">
              远程连接
            </el-button>
          </el-tooltip>
<!--          <el-tooltip content="刷新" placement="top">-->
<!--            <el-button-->
<!--              size="small"-->
<!--              icon="el-icon-refresh"-->
<!--              @click="refreshData">-->
<!--              刷新-->
<!--            </el-button>-->
<!--          </el-tooltip>-->
        </el-button-group>
      </div>
    </div>
    <div class="cloud-database-dashboard">

      <el-tabs v-model="activeTab" class="top-tabs" @tab-click="handleTab">
        <el-tab-pane label="服务器详情" name="ServerInfor">
          <ServerInfor v-if="activeTab=='ServerInfor'" :current-resource="currentResource"></ServerInfor>
        </el-tab-pane>
        <el-tab-pane label="监控" name="ServerMonitor">
          <ServerMonitor v-if="activeTab=='ServerMonitor'" :current-resource="currentResource" ></ServerMonitor>
        </el-tab-pane>
        <el-tab-pane label="安全组" name="AccessControl">
          <AccessControl v-if="activeTab=='AccessControl'" :current-resource="currentResource" ></AccessControl>
        </el-tab-pane>
        <el-tab-pane label="云盘/快照" name="CloudSnapshot">
          <CloudSnapshot v-if="activeTab=='CloudSnapshot'" :current-resource="currentResource"></CloudSnapshot>
        </el-tab-pane>

        <el-tab-pane label="云服务器备份" name="CloudBackup">
          <CloudBackup v-if="activeTab=='CloudBackup'" :current-resource="currentResource" ></CloudBackup>
        </el-tab-pane>
        <el-tab-pane label="云硬盘备份" name="CloudDiskBackup">
          <CloudDiskBackup v-if="activeTab=='CloudDiskBackup'" :current-resource="currentResource" ></CloudDiskBackup>
        </el-tab-pane>
        <el-tab-pane label="主机安全" name="HostSecurity">
          <HostSecurity v-if="activeTab=='HostSecurity'" :current-resource="currentResource" ></HostSecurity>
        </el-tab-pane>
        <el-tab-pane label="安全基线" name="SecurityBaseline">
          <SecurityBaseline v-if="activeTab=='SecurityBaseline'" :current-resource="currentResource" ></SecurityBaseline>
        </el-tab-pane>
        <el-tab-pane label="计划任务" name="ScheduledTasks">
          <ScheduledTasks v-if="activeTab=='ScheduledTasks'" :current-resource="currentResource" ></ScheduledTasks>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="OperationLogs">
          <OperationLogs v-if="activeTab=='OperationLogs'" :current-resource="currentResource" ></OperationLogs>
        </el-tab-pane>
<!--        <el-tab-pane label="操作记录" name="InvoiceStatistics">-->
<!--          <InvoiceStatistics v-if="activeTab=='InvoiceStatistics'" :current-resource="currentResource" ></InvoiceStatistics>-->
<!--        </el-tab-pane>-->
      </el-tabs>

    </div>
  </div>
</template>

<script>
import ServerInfor from "@/views/bom/hostresource/serviceInfor.vue";
import CloudResources from "@/views/bom/hostresource/resource.vue";
import AccessControl from "@/views/bom/hostresource/accessControl.vue";
import ServerMonitor from "@/views/bom/hostresource/monitor.vue";
import HostSecurity from "@/views/bom/hostresource/hostSecurity.vue";
import OperationLogs from "@/views/bom/hostresource/operationLogs.vue";
import ScheduledTasks from "@/views/bom/hostresource/scheduledTasks.vue";
import CloudSnapshot from "@/views/bom/hostresource/cloudSnapshot.vue";
import { ecsopen, ecsclose, ecsrest, todisk } from '@/api/resell/orderinstance'
import CloudBackup from "@/views/bom/hostresource/CloudBackup.vue";
import SecurityBaseline from "@/views/bom/hostresource/SecurityBaseline.vue";
import CloudDiskBackup from "@/views/bom/hostresource/CloudDiskBackup.vue";
import InvoiceStatistics from "@/views/bom/hostresource/InvoiceStatistics.vue";

export default {
  name: 'ServerDetails',
  components: {
    CloudSnapshot,
    ScheduledTasks,
    OperationLogs,
    HostSecurity,
    ServerMonitor,
    AccessControl,
    CloudResources,
    ServerInfor,
    CloudBackup,SecurityBaseline,CloudDiskBackup,InvoiceStatistics
  },
  data() {
    return {
      activeTab: 'ServerInfor',
      currentResource: null,
      resourceList: [],
      loading: false, // 添加 loading 状态
    };
  },
  created() {
    // 从 sessionStorage 中获取服务器资源对象
    const savedResource = sessionStorage.getItem('currentServerResource')
    if (savedResource) {
      this.currentResource = JSON.parse(savedResource)
      // 可选：获取后清除存储的数据
      sessionStorage.removeItem('currentServerResource')
    } else {
      // 如果没有存储的数据，则通过 ID 重新获取服务器信息
      //this.fetchServerDetails(this.id)
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$emit("handler-after");
    },
    // 刷新数据
    refreshData() {
      this.$message.success('数据已刷新')
    },
    handleTab(tab) {
      console.log("切换到标签页:", tab.name);
    },
    updateCurrentResource(resource) {
      this.currentResource = resource;
      console.log("更新当前资源:", this.currentResource);
    },
    updateResourceList(resourceList)
    {
      this.resourceList = resourceList;
      console.log("更新资源列表:", this.resourceList);
    },
    showServerInfor(resource) {
      this.activeTab = 'ServerInfor';
      this.updateCurrentResource(resource);
    },
    handleStart() {
      this.$confirm('确认要开启该服务器吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ecsopen(this.currentResource).then(() => {
          this.$message.success(`服务器 ${this.currentResource.resourceName} 正在开启中...`);
          this.refreshData();
        });
      });
    },
    handleStop() {
      this.$confirm('确认要关闭该服务器吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ecsclose(this.currentResource).then(() => {
          this.$message.success(`服务器 ${this.currentResource.resourceName} 正在关机中...`);
          this.refreshData();
        });
      });
    },
    handleRestart() {
      this.$confirm('确认要重启该服务器吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ecsrest(this.currentResource).then(() => {
          this.$message.success(`服务器 ${this.currentResource.resourceName} 正在重启中...`);
          this.refreshData();
        });
      });
    },
    handleConsole() {
      if (this.currentResource.other1 !== '1') {
        this.$message.warning('服务器未运行，无法建立远程连接');
        return;
      }

      todisk(this.currentResource).then(response => {
        let urlkey = response["msg"];
        window.open(urlkey, '_blank');
      });
    },
  },
  watch: {
    activeTab(newVal) {
      console.log('标签页切换到:', newVal);
    },
    currentResource(newVal) {
      console.log('当前资源更新:', newVal);
    }
  }
};
</script>
<style scoped>
.server-details {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  background-color: #fff;
  padding: 16px 20px;
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  align-items: center;
}

.cloud-database-dashboard {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 顶部标签样式 */
.top-tabs {
  background-color: #fff;
  padding: 10px 20px 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  border-bottom: none;
}

.top-tabs .el-tabs__header {
  margin-bottom: 0;
}

.top-tabs .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e4e7ed;
}

.top-tabs .el-tabs__item {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #606266;
}

.top-tabs .el-tabs__item.is-active {
  color: #409EFF;
  font-weight: bold;
}

.operation-group {
  margin-left: 16px;
}

.operation-group .el-button {
  padding: 8px 15px;
  min-width: 90px;
}

.operation-group .el-button [class^="el-icon-"] {
  margin-right: 5px;
}

.operation-group .el-button + .el-button {
  margin-left: -1px;
}

</style>
